<template>
  <div>
    <div class="center fs30 pt100">ES6分享</div>
    <!--<div class="w100 h100 g-bg" @click="clickHandle($event)">解构赋值</div>-->
  </div>
</template>

<script>
  import {pay} from '../utils/util'
  export default {
    name: "index",
    mounted() {
      // 解构--赋值s ==> 目的是为了赋值 左边一个解构右边一个解构 左右一一赋值
      {
        // var a, b, rest;
        // [a, b] = [1, 2]
        // console.log(a, b)
      }

      {
        // var a, b, rest;
        // [a, b, ...rest] = [1, 2, 3, 4, 5]
        // console.log(a, b, rest)
      }

      {
        // var {a, b} = {a:1, b:2}
        // console.log(a,b)
      }

      {
        // var {a, b, ...rest} = {a:1, b:2, c:3, d:4}
        // console.log(a,b,rest)
      }

      { // 交换赋值
        // let a = 5;
        // let b = 3;
        // [a,b] = [b, a];
        // console.log(a, b)
      }

      { // 使用场景
        // function f() {
        //   return [1,2,3,4]
        // }
        // var [a, b, ...c] = f()
        // console.log(a,b,c)
      }
      // 解构--赋值e

      // 对象扩展s
      { // 简写****
        // var a = 1;
        // var b = 2;
        // var obj1 = {
        //   a,
        //   b,
        //   hello () {
        //     console.log('hello')
        //   }
        // }
        // console.log(obj1)
      }
      // 属性表达式****
      {
        // var a = 'b'
        // var o1 = {
        //   a: 'c'
        // }
        // var o2 = {
        //   [a]: 'c'
        // }
        // console.log(o1, o2)
      }
      // 新增api****
      {
        // console.log('字符串', Object.is('abc', 'abc'),'基本类型') ===
        // console.log('数组', Object.is([], []), '引用类型' )
        // console.log('拷贝', Object.assign({a: 'a'}, {b:'b'}), '浅拷贝, 拷贝自身对象的属性，for in 出来的属性')

        // 浅拷贝就是拷贝第一层的基本类型值，以及第一层的引用类型地址

        // 第一步
        // let a = {
        //   name: "小明",
        //   age: 18
        // }
        // let b = {
        //   name: "红宝书很经典动不了",
        //   book: {
        //     title: "你不知道的JS",
        //     price: "45"
        //   }
        // }
        // let c = Object.assign(a, b);
        // // console.log(a, c, a===c, '第一步' )
        // //
        // // 第二步
        // b.name = "JS大神之路";
        // b.book.price = "55";
        // console.log(b, '第二步');
        // //
        // // // 第三步
        // console.log(a, '第三步影响到了a的price');


        // var deepCopy = function(src) {
        //   var ret = {}
        //   for (var k in src) {
        //     ret[k] = typeof src[k] ==='object' ? deepCopy(src[k]) : src[k]
        //   }
        //   return ret
        // }

      }
      // 对象扩展e

      // 多行字符串s
      {
        // var str = '德玛西亚国家队有哪些'
        //     + '德玛西亚皇子——嘉文四世;'
        //     + '德玛西亚之翼——奎恩;'
        //     + '光辉女郎——拉克丝;'
        //     + '德邦总管——赵信;'
        //     + '暗夜猎手——薇恩;'
        //     + '龙血武姬——希瓦娜;'
        //     + '哨兵之殇——加里奥;'
        //     + '德玛西亚之翼——奎恩;'
        // console.log(str)

        // var str =`德玛西亚国家队有哪些
        //   德玛西亚皇子——嘉文四世;
        //   德玛西亚之翼——奎恩;
        //   光辉女郎——拉克丝
        //   德邦总管——赵信;
        //   暗夜猎手——薇恩;
        //   龙血武姬——希瓦娜;
        //   哨兵之殇——加里奥
        //   德玛西亚之翼——奎恩;`
        // console.log(str)
      }
      // 多行字符串e

      // 模板字符串s
      {
        // var LOL = {
        //   dm: '盖伦',
        //   db: '德邦'
        // }
        // console.log(`${LOL.db}喜欢用枪捅${LOL.dm}`)
      }
      // 模板字符串e

      // 箭头函数s (1: 可以省去括号 2:return 后面是语句可以省去return 3:es5 this指向执行对象 e6 在哪里定义的指向的就是哪个)
      // {
      //   var evens = [1,2,3,4,5,6]
      //   var odds = evens.map(function (v) {
      //     return v*2
      //   })
      //   console.log(evens, odds)
      // }

      {
        // var evens = [1,2,3,4,5,6]
        // var odds = evens.map(v=> v*2)
        // console.log(evens, odds)
      }

      {
        // function Fc() {
        //   this.a = 'a'
        //   this.b= 'b'
        //   this.c = {
        //     a: 'a+',
        //     b: function () {
        //       return this.a
        //     }
        //   }
        // }
        // console.log(new Fc().c.b())
      }

      // {
      //   function Fc() {
      //     this.a = 'a'
      //     this.b= 'b'
      //     this.c = {
      //       a: 'a+',
      //       b: () => {
      //         return this.a
      //       }
      //     }
      //   }
      //   console.log(new Fc().c.b())
      // }

      // 箭头函数e


      // 函数默认参数写法
      {
        // function f(x, y, z) {
        //   y = y || 7;
        //   z= z || 42
        //   return x+y+z
        // }
        // console.log(f(1))
      }

      {
        // function f(x, y=7, z=42) {
        //   return x+y+z
        // }
        // console.log(f(1))
      }

      { // 必选参数检查
        // function  check() {
        //   throw new Error('不能为空')
        // }
        // function f(x= check(), y=7, z=42) {
        //   return x+y+z
        // }
        //
        // try {
        //   f()
        // } catch (e) {
        //   console.log(e)
        // }
      }

      { // 可变参数求和
        // function f() {
        //   var a = Array.prototype.slice.call(arguments)
        //   var sum = 0
        //   a.forEach(function (item) {
        //     sum+= item*1
        //   })
        //   return sum
        // }
        // console.log(f(1,2,3))
      }

      { // 可变参数求和
        // function f(...a) {
        //   var sum = 0
        //   a.forEach(function (item) {
        //     sum+= item*1
        //   })
        //   return sum
        // }
        // console.log(f(1,2,3))
      }

      // 函数默认参数写法e

      // 扩展运算符s

      {
        // var arr1 = ['刘备','张飞','关羽']
        // var arr2 = ['诸葛亮','赵云','马超', '黄忠'].concat(arr1)
        // console.log(arr2)
      }

      {
        // var arr1 = ['刘备','张飞','关羽']
        // var arr2 = ['诸葛亮','赵云','马超', '黄忠', ...arr1]
        // console.log(arr2)
      }

      {
        // var obj1 = { adc:'寒冰', fz:'阿莫莫', zd: '光辉' }
        // var obj2 = {...obj1, adc:'德莱文', sd:'鳄鱼', dy: '末日'}
        // console.log(obj2)
      }

      // 扩展运算符e


      // es5构造方法s
      {
        // 基本用法****
        // function ManApe(name) {
        //   this.name = name
        // }
        // ManApe.prototype.eat = function (food) {
        //   return this.name+'吃'+food
        // }
        //
        // var v = new ManApe('人猿泰山')
        // console.log(v.name)
        // console.log(v.eat('🍌'))
        //
        // // 构造函数模式继承 **** 属性的继承
        // function LOL(name) {
        //   ManApe.apply(this, arguments)
        //   this.sex = 'boy'
        // }
        // // prototype模式*** 方法的继承
        // LOL.prototype = new ManApe()
        // LOL.prototype.constructor = LOL
        //
        // var c = new LOL ('德玛西亚盖能')
        // console.log(c.name)
        // console.log(c.eat('什么都不用吃，就是使用大宝剑'))
        // console.log(c.sex)
      }
      // 其他继承 利用空对象作为中介继承、拷贝继承 等等

      // es5构造方法e

      // class 类s
      {
        // 普通 ****
        // class ManApe {
        //   constructor (name='人猿泰山'){
        //     this.name = name
        //   }
        //   eat(food){
        //     return food
        //   }
        // }
        //
        // console.log(new ManApe().eat('🍌'))
        // console.log(new ManApe().name)
        //
        // // 继承****
        // class LOL extends ManApe {
        //   constructor (name='人猿泰山'){
        //     super(name)
        //     this.sex = 'boy'
        //   }
        // }
        //
        // console.log(new LOL('德玛西亚盖伦').name, new LOL('德玛西亚盖伦').sex)
        // console.log(new LOL('德玛西亚盖伦').eat('什么都不用吃，就是使用大宝剑'))

        // getter setter****
        // class ManApe {
        //   constructor (name='人猿泰山'){
        //     this.name = name
        //   }
        //   get longName (){
        //     return '北京' + this.name
        //   }
        //   set longName (value){
        //     // console.log('xxxxxxx',value)
        //     this.name = value
        //   }
        // }
        // var v = new ManApe()
        // console.log(v.longName)
        // v.longName = '大猩猩'
        // console.log(v.longName)

        //静态方法****
        // class ManApe {
        //   constructor (name='人猿泰山'){
        //     this.name = name
        //   }
        //   static play (){
        //     return '玩树'
        //   }
        // }
        // console.log(ManApe.play())

        //静态属性****
        // class ManApe {
        //   constructor (name='人猿泰山'){
        //     this.name = name
        //   }
        // }
        //
        // ManApe.like = '玩树'
        // console.log(ManApe.like)
      }
      // class 类e
    },
    methods:{
      clickHandle(e){
        var {clientX,clientY, target} = e
        console.log(clientX,clientY,target)
      }
    }
  }
</script>

<style scoped>

</style>